<template>
  <div
    :class="['flow-node', `status-${node.status || 'default'}`, { selected: isSelected }]"
    :style="nodeStyle"
    @click="handleClick"
  >
    <!-- 使用插槽自定义节点内容 -->
    <slot :node="node" :is-selected="isSelected">
      <!-- 默认节点内容 -->
      <div class="node-header" :style="headerStyle">
        <div class="node-icon">
          <slot name="icon" :node="node">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
              <circle cx="7" cy="7" r="6" />
            </svg>
          </slot>
        </div>
        <div class="node-title">{{ node.title || node.id }}</div>
        <div class="node-status-indicator">
          <div class="status-dot"></div>
        </div>
      </div>
      
      <div class="node-content">
        <slot name="content" :node="node">
          <div v-if="node.description" class="node-description">
            {{ node.description }}
          </div>
          <div v-if="node.data" class="node-data">
            <div
              v-for="(value, key) in displayData"
              :key="key"
              class="data-row"
            >
              <span class="data-label">{{ key }}:</span>
              <span class="data-value">{{ value }}</span>
            </div>
          </div>
        </slot>
      </div>
    </slot>
    
    <!-- 连接点 -->
    <div class="connection-points">
      <div v-if="node.hasInput" class="input-point"></div>
      <div v-if="node.hasOutput" class="output-point"></div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import { NODE_STATUS } from './constants';

export default {
  name: 'FlowNode',
  props: {
    node: {
      type: Object,
      required: true,
    },
    isSelected: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const nodeStyle = computed(() => ({
      left: `${props.node.x}px`,
      top: `${props.node.y}px`,
      width: `${props.node.width}px`,
      height: `${props.node.height}px`,
    }));
    
    const headerStyle = computed(() => {
      const status = props.node.status || 'default';
      const config = NODE_STATUS[status];
      return {
        background: `linear-gradient(135deg, ${config.color} 0%, ${config.color}dd 100%)`,
      };
    });
    
    const displayData = computed(() => {
      if (!props.node.data) return {};
      // 只显示前3个字段
      const entries = Object.entries(props.node.data).slice(0, 3);
      return Object.fromEntries(entries);
    });
    
    const handleClick = (event) => {
      emit('click', { node: props.node, event });
    };
    
    return {
      nodeStyle,
      headerStyle,
      displayData,
      handleClick,
    };
  },
};
</script>

<style scoped>
.flow-node {
  position: absolute;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.flow-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.flow-node.selected {
  box-shadow: 0 0 0 2px rgba(113, 75, 103, 0.4);
}

/* 节点头部 */
.node-header {
  color: white;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  height: 32px;
  font-size: 12px;
}

.node-icon {
  margin-right: 6px;
  display: flex;
  align-items: center;
}

.node-title {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-status-indicator {
  width: 10px;
  height: 10px;
}

.status-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* 节点内容 */
.node-content {
  padding: 10px 12px;
  height: calc(100% - 32px);
  overflow: hidden;
}

.node-description {
  font-size: 11px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.node-data {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.data-label {
  color: #666;
  font-weight: 500;
}

.data-value {
  color: #333;
  font-weight: 600;
}

/* 连接点 */
.connection-points {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.input-point,
.output-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #714b67;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.input-point {
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
}

.output-point {
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
}

/* 不同状态的节点样式 */
.flow-node.status-success:hover {
  border-color: #52c41a;
}

.flow-node.status-warning:hover {
  border-color: #fa8c16;
}

.flow-node.status-error:hover {
  border-color: #f5222d;
}

.flow-node.status-processing:hover {
  border-color: #1890ff;
}
</style>

